import React from 'react'
import { Card,Icon,Grid,Badge } from 'antd-mobile'
import hhistory from '../history'

import CSSModules from 'react-css-modules'
import styles from './BizForm.less'
import { connect } from 'react-redux'
import { getProductExpire } from '../actions'
import noimg from './assets/default_small_img.png'

@CSSModules(styles, { allowMultiple: true })
class BizForm extends React.Component {

	componentDidMount(){
		this.props.getProductExpire()
	}
	render(){

		// if( this.props.productExpire.length !== 0 ){
			// console.log( "产品到期情况",JSON.stringify(this.props.productExpire) )
		// }
		let data = [{
            icon:<Icon style={{height:'0.9rem',width:'0.9rem',position:'absolute',top:'50%',left:'50%',marginTop:'-0.45rem',marginLeft:'-0.45rem'}} type={require( './assets/icon_index_xinjianjituan.svg' )} size={"lg"}/>,
            text:<div>
				<span>新建集团</span>
			</div> ,
            color:'#5E91D1',
			pash:'/tenantPush'

        },
            {
                icon:<Icon style={{height:'0.9rem',width:'0.9rem',position:'absolute',top:'50%',left:'50%',marginTop:'-0.45rem',marginLeft:'-0.45rem'}} type={require( './assets/icon_index_xinjianmendian.svg' )} size={"lg"}/>,
                text:<div>
					<span>新建门店</span>
				</div> ,
                color:'#FD8900',
				pash:'/storePush'
            },{
                icon:<Icon style={{height:'0.9rem',width:'0.9rem',position:'absolute',top:'50%',left:'50%',marginTop:'-0.45rem',marginLeft:'-0.45rem'}} type={require( './assets/icon_index_kaitongyewu.svg' )} size={"lg"}/>,
                text:<div>
					<span>开通业务</span>
				</div> ,
                color:'#EB5E38',
                pash:'/appPage'
            }]

		return(
			<div>
				<Card full>
					<Card.Header style={{backgroundColor:'#FCFCFC',height:'0.88rem'}}
								 title={<span style={{ fontSize:"0.26rem" }}>快捷入口</span>}
					/>
					<Card.Body>
						<Grid data={data} columnNum={3}
							  renderItem = {
                                  dataItem => (
									  <div style={{width:'100%',height:'100%'}} onClick={() => {hhistory.push(dataItem.pash)}}>
										  <div style={{
										  		position:'relative',
											  overflow:'hidden',
                                              height:"65%",
                                              width:"65%",
                                              paddingTop:"13%",
                                              position:'relative',
                                              background:dataItem.color,
                                              borderRadius:"0.08rem",
                                              margin:"0.15rem auto"
                                          }}>
                                              { dataItem.icon }
										  </div>
										  <div style={{fontSize:'0.28rem',lineHeight:'0.38rem',color:'#333'}}>
                                              { dataItem.text }
										  </div>
									  </div>
                                  )
                              }
							  hasLine={false} />
					</Card.Body>
				</Card>
			</div>
		)
	}
}

const mapStateToProps = ( state ) => ({
	productExpire:state.productExpire
})

const mapDispatchToProps = ( dispatch ) => ({
	getProductExpire:() => dispatch( getProductExpire() )
})

export default connect( mapStateToProps,mapDispatchToProps )(BizForm)